<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>支付</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../node_modules/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../css/payoff.css">
</head>

<body>
    <div id="app">
        <div class="payoff_head">
            <mt-header fixed title="支付">
                <a href="./order_form.html" slot="left">
                    <mt-button icon="back"></mt-button>
                </a>
            </mt-header>
        </div>
        <div class="pay_message">
            <mt-cell title="商品总数">
                <span>共{{sum}}件</span>
            </mt-cell>
            <mt-cell title="商品总价">
                <span>￥{{price_all}}</span>
            </mt-cell>
            <mt-cell title="总运费">
                <span>￥{{freight_all}}</span>
            </mt-cell>
            <mt-cell title="白条支付">
                <span>￥{{debt_all}}</span>
            </mt-cell>
            <mt-cell title="应付总价">
                <span class="truly_pay">￥{{actul_all}}</span>
            </mt-cell>
        </div>
        <div class="pay_methods">
            <!-- <mt-radio title='选择支付方式' align="right" v-model="pay_methods" :options="options">
            </mt-radio> -->
            <p>选择支付方式</p>
            <div class="radio_group" v-for="item in options" :key="item.name">
                <img :src="item.icon" width="20" height="20" alt="">
                <label :for="item.name">{{item.label}}</label>
                <label class="radio_1">
                    <input type="radio" class="trulyRadio" :id="item.name" :value="item.value" v-model="picked" @change="show_value">
                    <span class="falseRadio"></span>
                </label>
            </div>
        </div>
        <button class="confirm_pay" @click="confirm_pay">确认支付</button>
    </div>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/mint-ui/lib/index.js"></script>
    <script src="../js/global.js"></script>
    <script>
        var sum = localStorage.getItem('num_all');
        var price_all = localStorage.getItem('price_all');
        var freight_all = localStorage.getItem('freight_all');
        var debt_all = localStorage.getItem('debt_money');
        var actul_all = localStorage.getItem('actul_price');
        let vm = new Vue({
            el: "#app",
            data: {
                sum: sum,
                price_all:price_all,
                freight_all: freight_all,
                debt_all: debt_all,
                actul_all: actul_all,
                pay_methods: '',
                picked:'',
                options: [
                    {
                        label: '余额支付',
                        value: '4',
                        name:'one',
                        icon:'../images/icon1.png'
                    },
                    {
                        label: '支付宝支付',
                        value: '1',
                        name:'two',
                        icon:'../images/icon2.png'
                    },
                    {
                        label: '微信支付',
                        value: '2',
                        name:'three',
                        icon:'../images/icon3.png'
                    },
                    {
                        label: '银联支付',
                        value: '3',
                        name:'four',
                        icon:'../images/icon4.png'
                    },
                    {
                        label: '好友代付',
                        value: '5',
                        name:'five',
                        icon:'../images/icon5.png'
                    }
                ]
            },
            filters:{
                toFixed(value){
                    return value.toFixed(2);
                }
            },
            methods:{
                show_value(e){
                    console.log(this.picked);
                },
                confirm_pay(){
                    if(this.picked ==''){
                        vm.$toast({
                            message:'请选择一种支付方式',
                            position:'middle',
                            duration:1000
                        })
                    }else{
                        var order_sn = localStorage.getItem('order_sn');
                        var token = GetQueryString('token');
                        $.ajax({
                            url:BaseUrl+'/index.php/Api/OrderApi/orderPay',
                            type:'post',
                            dataType:'json',
                            data:{
                                'token':token,
                                'order_sn':order_sn,
                                'pay_code':this.picked
                            },
                            success(data){
                                console.log(data);
                            },
                            error(err){
                                console.log(err);
                            }
                        })
                    }
                    // window.location.href="./shop_cart.html";
                }
            }
        })

    </script>
</body>

</html>